<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <!-- 头部组件 -->
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 属性组件 -->
        <!-- 放置一个el-tree组件 -->
        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDepartment(data.id)"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item
                          @click.native="deitDepartment(data.id)"
                          >编辑部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="del(data.id)"
                          >删除部门</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 弹框 -->

    <add-departments
      ref="addDepart"
      :cur-id="curId"
      :show-dialog="dialogVisible"
      @close-dialog="closeDialog"
      @update-list="hGetDepartments"
      :code-list="codeList"
    />
  </div>
</template>

<script>
import {
  getDepartments,
  delDepartments,
  getDepartDetail,
} from "@/api/departments";
import { transTree } from "@/utils/transTree";
import AddDepartments from "./components/add-departments.vue";
export default {
  name: "happy",
  components: {
    AddDepartments,
  },
  data() {
    return {
      list: [], // 存放数据
      defaultProps: {
        label: "name", // 以 后端返回的接口数据字段名称为主
        children: "children",
      },
      dialogVisible: false, // true就打开弹框 false就关闭
      curId: null,
      codeList: [],
    };
  },
  // 初始化组件 运行时 销毁是
  mounted() {
    this.hGetDepartments();
  },
  methods: {
    // 获取列表的函数
    async hGetDepartments() {
      // 处理函数
      // 页面初始化的时候有可能会发送n个请求 n个请求之间还可能互相依赖
      // 为了方便维护 生命周期钩子函数只做初始化的事情 尽量简单

      // 在生命周期钩子函数的前面尽量不要包装成async
      const res = await getDepartments();
      // 用来做校验的未经过处理的原数组
      // 把数组中code字段单独拿出来作为一个新数组
      this.codeList = res.data.depts.map((item) => item.code);
      this.list = transTree(res.data.depts);

      // transTree(res.data.depts);
    },
    // 删除功能
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // then是点击确认执行的代码
        .then(async () => {
          // 删除操作成功
          await delDepartments(id);
          this.hGetDepartments();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          // catch是点击取消执行的代码
        });
    },

    // 新增
    addDepartment(id) {
      // 1. 点击行为的发生是在父组件中 而对于id的使用是发生在子组件 父传子
      // 2. 每一次只要点击行为发生了 id就得更新一下 找一个地方声明一个id 每一次点击都把最新的id覆盖到id上
      this.curId = id;
      // 打开弹框
      this.dialogVisible = true;
    },
    // 编辑
    deitDepartment(id) {
      // this.curId = id;
      this.dialogVisible = true;
      // 如果能把子组件中的获取详情的接口调用起来
      console.log(this.$refs.addDepart);
      this.$refs.addDepart.getDetail(id);
    },
    closeDialog() {
      // 关闭弹框
      this.dialogVisible = false;
    },
  },
};
</script>

<style>
</style>